<template>
  <div class="person-search">
    <el-form
      ref="form"
      :inline="true"
      :model="form"
      label-width="120px"
      :label-position="labelPosition"
      class="person-search_form"
    >
      <div>
        <el-form-item label="车名">
          <el-input
            v-model="form.nickName"
            placeholder="请输入"
            class="short-input"
          ></el-input>
        </el-form-item>

        <el-form-item label="车型">
          <el-input
            v-model="form.name"
            placeholder="请输入"
            class="short-input"
          ></el-input>
        </el-form-item>

        <el-form-item label="价格筛选" prop="list">
          <!-- <el-select
            multiple
            style="width: 100%"
            clearable
            v-model="list"
            placeholder="请选择"
            class="short-input"
            @change="changeValue"
          >
            <el-option
              v-for="item in roleType == '1,2'
                ? propertyList
                : roleType == '1'
                ? propertyList1
                : propertyList2"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select> -->
        </el-form-item>

        <el-form-item label="里程筛选">
          <el-select
            clearable
            v-model="form.certification"
            placeholder="请选择"
            class="short-input"
          >
            <el-option
              v-for="item in certificationList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="品牌筛选">
          <el-select
            clearable
            v-model="form.bid"
            placeholder="请选择"
            class="short-input"
          >
            <el-option
              v-for="item in subBusinessList"
              :key="item.id"
              :label="item.businessName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上牌时间筛选">
          <el-select
            clearable
            v-model="form.channel"
            placeholder="请选择"
            class="short-input"
          >
            <el-option
              v-for="item in sourceList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车龄筛选">
          <el-select
            clearable
            v-model="form.consumption"
            placeholder="请选择"
            class="short-input"
          >
            <el-option
              v-for="item in consumptionList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="用户创建时间">
          <el-col :span="11">
            <el-form-item prop="startTime" class="short-input">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始时间"
                v-model="form.startTime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">至</el-col>
          <el-col :span="11">
            <el-form-item prop="endTime" class="short-input">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束时间"
                v-model="form.endTime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item> -->
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit(true)">查询</el-button>
          <el-button size="small" @click="handleClear('clear')">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
// import { subBusinessList } from "@/api/order";
const sourceList = [
  { value: 1, name: "生活圈" },
  { value: 2, name: "微信关注" },
  { value: 3, name: "养老顾问" },
  { value: 4, name: "系统添加" },
];
const certificationList = [
  { value: 0, name: "未认证" },
  { value: 1, name: "认证" },
];
const propertyList = [
  { value: 0, name: "入住老人" },
  { value: 1, name: "报名学员" },
  { value: 2, name: "微信用户" },
  { value: 3, name: "养老顾问" },
];
const propertyList1 = [
  { value: 0, name: "入住老人" },

  { value: 2, name: "微信用户" },
  { value: 3, name: "养老顾问" },
];
const propertyList2 = [
  { value: 1, name: "报名学员" },
  { value: 2, name: "微信用户" },
  { value: 3, name: "养老顾问" },
];
const consumptionList = [
  { value: "", name: "请选择" },
  { value: 1, name: "是" },
  { value: null, name: "否" },
];

const userStatus = [
  { value: 1, name: "正常" },
  { value: 0, name: "已注销" },
];

const form = {
  source: "",
  cardType: "",
  consumption: "",
  startTime: "",
  nickName: "",
  endTime: "",
  bid: "",
  list: [],
};

export default {
  data() {
    this.sourceList = sourceList;
    this.certificationList = certificationList;
    this.propertyList = propertyList;
    this.propertyList1 = propertyList1;
    this.propertyList2 = propertyList2;
    this.consumptionList = consumptionList;
    this.userStatus = userStatus;
    return {
      subBusinessList: [],
      labelPosition: "right",
      //初始化地址id
      list: [],
      form: {
        pageNow: 1,
        name: "",
        source: "",
        roleType: "",
        cardType: "",
        consumption: "",
        startTime: "",
        nickName: "",
        endTime: "",
        bid: "",
      },
      endpickerOptions: {
        disabledDate: (time) => {
          if (this.form.startTime !== "") {
            return time.getTime() < new Date(this.form.startTime).getTime();
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
    };
  },
  methods: {
    changeValue(value) {
      if (value.length == 0) {
        this.list = [];
      }
      // for (let i = 0; i < value.length; i++) {
      //   if (value[i] == 0) {
      //     this.form.bindAdviser == 1;
      //   }
      //   if (value[i] == 1) {
      //     this.form.bindStudent == 1;
      //   }
      //   if (value[i] == 2) {
      //     this.form.bindWechat == 1;
      //   }
      //   if (value[i] == 3) {
      //     this.form.bindYardUser == 1;
      //   }
      // }
    },
    onSubmit(search) {
      this.form.search = search;
      this.doSearch();
    },
    handleClear(type) {
      this.list = [];
      this.form = { ...form };
      if (type == "clear") {
        this.form.type = "clear";
      }
      this.doSearch();
    },
    bindType() {
      if (this.list.includes(0)) {
        this.form.bindYardUser = 1;
      } else {
        this.form.bindYardUser = null;
      }
      if (this.list.includes(1)) {
        this.form.bindStudent = 1;
      } else {
        this.form.bindStudent = null;
      }
      if (this.list.includes(2)) {
        this.form.bindWechat = 1;
      } else {
        this.form.bindWechat = null;
      }
      if (this.list.includes(3)) {
        this.form.bindAdviser = 1;
      } else {
        this.form.bindAdviser = null;
      }
    },
    doSearch() {
      if (this.list.length != 0) {
        this.bindType();
      } else {
        delete this.form.bindAdviser;
        delete this.form.bindStudent;
        delete this.form.bindWechat;
        delete this.form.bindYardUser;
      }
      this.$emit("handleSearch", this.form);
    },
    getList() {
      // subBusinessList().then((res) => {
      //   this.subBusinessList = res.data;
      // });
    },
  },
  created() {
    this.roleType = sessionStorage.getItem("qs_agencyType");
    this.getList();
    this.doSearch();
  },
  activated() {
    this.getList();
    this.doSearch();
  },
};
</script>
<style lang="less" scoped>
.person-search {
  border-top: 1px;
  &_form {
    padding: 20px 0 0 20px;
  }
  .line {
    margin: 0 3px;
  }
  .el-radio-group {
    margin-left: 10px;
  }
  .long-input {
    width: 400px;
  }
  .short-input {
    width: 200px;
  }
}

.el-select__tags {
  white-space: nowrap;
  overflow: hidden;
}
</style>
